<template>
  <div>
    <button v-bind="attrsObj" @click="counter++">{{counter}}</button>
    <p v-if="seen">seen</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
      attrsObj: { // 动态绑定多个值
        id: "btn",
        class: "add"
      },
      seen: false
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  }
}
</script>

<style>
</style>